<meta charset="utf-8">
<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>考试页面</title>
    <link rel="stylesheet"  type="text/css"  th:href="@{/exam/style.css}"/>
    <link rel="stylesheet"  type="text/css"  href="https://at.alicdn.com/t/font_2195963_abbco0l2o6v.css"/>

</head>

<script type="text/javascript">
    function CheckChoice() {
        for (i = 1;i <= 20;i++){
            var a = document.getElementById(i + "_option_1");//获取表单对象
            var b = document.getElementById(i + "_option_2");//获取表单对象
            var c = document.getElementById(i + "_option_3");//获取表单对象
            var d = document.getElementById(i + "_option_4");//获取表单对象

            if (a.checked || b.checked || c.checked || d.checked){

            }else{
                alert("您有未作答的题目！！请继续作答");
                return false;
            }
        }

        return score;
    }

    function changeColor(obj)
    {
        var a = document.getElementById("li" + obj);
        a.style.background = '#5fcb63';
    }


    var t = 30;//设定跳转的时间
    setInterval("refer()", 1000); //启动1秒定时
    function refer() {
        if (t == 0) {
            for (i = 1;i <= 20;i++){
                var a = document.getElementById(i + "_option_1");//获取表单对象
                var b = document.getElementById(i + "_option_2");//获取表单对象
                var c = document.getElementById(i + "_option_3");//获取表单对象
                var d = document.getElementById(i + "_option_4");//获取表单对象

                if (a.checked || b.checked || c.checked || d.checked){

                }else{
                    document.getElementById(i + "_option_1").setAttribute("checked","checked");
                    document.getElementById(i + "_option_1").value = "false";
                }
            }
            document.getElementById("formSubmit").submit();
        }
        document.getElementById('TestTime').innerHTML = "剩余时间："
            + parseInt(t/60) + "分" + parseInt(t%60)
            + "秒"; // 显示倒计时
        t--; // 计数器递减
    }


</script>


<body>


<!--<%&#45;&#45;主体页面标签&#45;&#45;%>-->
<div class="main">
<!--                    <%&#45;&#45;    答题部分标签&#45;&#45;%>-->

                        <div class="test">


                            <form th:action="@{/exam/finishExam}" method="post" onsubmit="return CheckChoice();" id="formSubmit">


                                <div class="test_title">
                                    <div class="test_title_title">
                                        <div>单选题</div>
                                        <p>
                                            <span>共</span><i>20</i><span>题，</span><span>合计</span><i>100</i><span>分</span>
                                        </p>
                                    </div>
                                </div>

                                <div class="test_content">
                                    <ul>

                                        <li th:id="${map.key}" th:each="map:${map}" >
<!--                                            <input type="hidden" th:id="'第' + ${map.key} + '题'" th:value="${map.value.answer}"/>-->
                                            <div class="test_content_tt">
                                                <i th:text="${map.key}"></i><span>(5分)</span><font th:text="${map.value.subject}"></font>
                                                <div class="icon"><i class="icon-timu iconfont"></i></div>
                                            </div>

                                            <div class="test_content_tt_selection">
                                                <ul>


<!--                                                    A选项开始-->
                                                    <li class="option">
<!--                                                        th:name="answer${map.key}"-->
                                                        <input type="radio" class="radioOrCheck" th:value="${map.value.answer=='a'?'true':'false'}"
                                                               th:id="${map.key}+_option_1" th:name="${map.key}" th:onclick="'changeColor(' + ${map.key} + ')'"
                                                        />


                                                        <label>
                                                            A.
                                                            <p class="ue" style="display: inline;" th:text="${map.value.a}"></p>
                                                        </label>
                                                    </li>
 <!--                                                    A选项结束-->





<!--                                                    B选项开始-->
                                                    <li class="option">

                                                        <input type="radio" class="radioOrCheck" th:value="${map.value.answer=='b'?'true':'false'}"
                                                               th:id="${map.key}+_option_2" th:name="${map.key}" th:onclick="'changeColor(' + ${map.key} + ')'"
                                                        />


                                                        <label>
                                                            B.
                                                            <p class="ue" style="display: inline;" th:text="${map.value.b}"></p>
                                                        </label>
                                                    </li>
<!--                                                    B选项结束-->






<!--                                                   C选项开始-->
                                                    <li class="option">

                                                        <input type="radio" class="radioOrCheck" th:value="${map.value.answer=='c'?'true':'false'}"
                                                               th:id="${map.key}+_option_3" th:name="${map.key}" th:onclick="'changeColor(' + ${map.key} + ')'"
                                                        />


                                                        <label>
                                                            C.
                                                            <p class="ue" style="display: inline;" th:text="${map.value.c}"></p>
                                                        </label>
                                                    </li>
<!--                                                    C选项结束-->








<!--                                                    D选项开始-->
                                                    <li class="option">

                                                        <input type="radio" class="radioOrCheck" th:value="${map.value.answer=='d'?'true':'false'}"
                                                               th:id="${map.key}+_option_4" th:name="${map.key}" th:onclick="'changeColor(' + ${map.key} + ')'"
                                                        />


                                                        <label >
                                                            D.
                                                            <p class="ue" style="display: inline;" th:text="${map.value.d}"></p>
                                                        </label>
                                                    </li>
<!--                                                   D选项结束-->




                                                </ul>
                                            </div>

                                        </li>

                                    </ul>

                                </div>


<!--                                底部固定标签开始-->
                                <div id="foot">
                                    <div class="foot_left">

                                        <div>
                                            <i class="icon-jiaojuanshijian iconfont"></i>
                                        </div>
                                        <div id="TestTime">

                                        </div>

                                    </div>
                                    <div class="foot_right">
                                        <input type="submit"  value="交卷" id="Button2" >
                                    </div>

                                </div>

<!--                                底部固定标签结束-->

                            </form>

                        </div>


<!--                    <%&#45;&#45;    答题部分标签结束&#45;&#45;%>-->


<!--                <%&#45;&#45;        右侧答题卡标签&#45;&#45;%>-->
                        <div class="right">
                            <div class="right_title_1">
                                <div>
                                    答题卡
                                </div>

                            </div>

                            <table>
                                <tr>
                                    <tl>
                                        <div id="f1">
                                            <div id="f1_1">单选题   共20题</div>
                                        </div>
                                    </tl>
                                </tr>
                                <div class="rt_content_nr answerSheet">
                                    <ul>

                                        <li th:each="map:${map}" th:id="li + ${map.key}"><a th:href="@{'#' + ${map.key}}" th:text="${map.key}"></a></li>

                                    </ul>
                                </div>
                            </table>
                        </div>
<!--                   <%&#45;&#45;        右侧答题卡标签结束&#45;&#45;%>-->

</div>

</body>
</html>
